import React from 'react';
import { R, sw, Adp } from "../tools";
import { Animated } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Icons, SvgIcon } from '../res/svgicons';
import * as color from '../res/colors';
import * as dimen from '../res/dimens';
/**
 *  引入底部导航tab的页面
 */
import HomePage from '../screen/home/HomePage';
import CommunityPage from '../screen/community/CommunityPage';
import MyPage from '../screen/my/MyPage';

const BottomTab = createBottomTabNavigator();

// 底部导航路由名

const Home = "首页";
const Community = "社区";
const My = "我";

export default function AppBottomTabNavigation() {

    return (
        <BottomTab.Navigator
            initialRouteName={Home}
            lazy={false}
            tabBar={(props: any) => <BottomTabBar {...props} />}>
            <BottomTab.Screen name={Home} component={HomePage} />
            {/* <BottomTab.Screen name={Community} component={CommunityPage} /> */}
            <BottomTab.Screen name={My} component={MyPage} />
        </BottomTab.Navigator>
    );
}

/**
 * 自定义【文字图标】底部导航条
 */
function BottomTabBar({ state, descriptors, navigation }) {
    let routes = state.routes; // 底部导航路由数组

    /**
     *  map函数，返回底部导航item数组
     */
    const _tabs = () =>
        routes.map((route: any, index: number) => {
            const { options } = descriptors[route.key]; //每个BottomTab.Screen 的可选属性

            const label =
                options.tabBarLabel != undefined
                    ? options.tabBarLabel
                    : options.title != undefined
                        ? options.title
                        : route.name;

            const isFocused = state.index === index; //当前tab是否获得焦点

            const onPress = () => {
                const event = navigation.emit({
                    type: "tabPress",
                    target: route.key
                }); // 发送底部tab被点击的事件通知
                if (!isFocused && !event.defaultPrevented)
                    navigation.navigate(route.name);
            };

            const onLongPress = () => {
                //TODO: 长按事件
            };


            /** TAG1
             *  使用svg图片的tab icon
             */
            const _tabIconSvg = () => {
                switch (route.name) {
                    case Home:
                        return <SvgIcon name={isFocused ? Icons.Ant_Home_Fill : Icons.Ant_Home} size={dimen.BottomTab_tabIconSize} scale={dimen.BottomTab_svgScale} />
                    case Community:
                        return <SvgIcon name={isFocused ? Icons.Ant_Smile_Fill : Icons.Ant_Frown} size={dimen.BottomTab_tabIconSize} scale={dimen.BottomTab_svgScale} />
                    case My:
                        return <SvgIcon name={isFocused ? Icons.Ant_AppStore_Fill : Icons.Ant_AppStore} size={dimen.BottomTab_tabIconSize} scale={dimen.BottomTab_svgScale} />
                }
            }


            //  底部导航图标 TAG2
            const icons_unfocused: any[] = [
                require("../res/imageAssets/home.png"),
                require("../res/imageAssets/community.png"),
                require("../res/imageAssets/me.png")
            ];
            const icons_focused: any[] = [
                require("../res/imageAssets/tabfocus.png"),
                require("../res/imageAssets/tabfocus.png"),
                require("../res/imageAssets/tabfocus.png"),
            ];
            /**
             *  使用图片形式的tab icon
             */
            const _tabIconPng = () => {
                if (icons_focused.length <= 0) {
                    return;
                }
                switch (route.name) {
                    case Home:
                        return <R.Image source={isFocused ? icons_focused[0] : icons_unfocused[0]} style={{ height: dimen.x34, width: dimen.x34 }} resizeMode={"contain"} />
                    case Community:
                        return <R.Image source={isFocused ? icons_focused[1] : icons_unfocused[1]} style={{ height: dimen.x34, width: dimen.x34 }} resizeMode={"contain"} />
                    case My:
                        return <R.Image source={isFocused ? icons_focused[2] : icons_unfocused[2]} style={{ height: dimen.x34, width: dimen.x34 }} resizeMode={"contain"} />
                }
            }
            return (
                <R.TouchableOpacity
                    activeOpacity={1.0}
                    key={index}
                    onPress={onPress}
                    style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                    {
                        _tabIconPng()
                    }
                    {/* {
                        _tabIconSvg()
                    } */}
                    {/* <R.Text style={{ color: color.black22 }}>
                        {label}
                    </R.Text> */}
                </R.TouchableOpacity>
            )
        }
        );

    /**
     *  返回自定义底部导航栏组件
     */
    const fullScreen = state.index == -1;

    return (
        <R.View style={fullScreen ? styles.fullscreen_Tab : styles.normal_Tab}>
            <R.View style={[{ backgroundColor: color.alpha0, paddingTop: dimen.BottomTab_paddingTop }, styles.tabContainer]}>
                {
                    _tabs()
                }
            </R.View>
        </R.View>
    );
}

/**
 * 自定义【文字】底部导航条
 */
function BottomTabBarPureTextKind({ state, descriptors, navigation }) {
    let routes = state.routes; // 底部导航路由数组

    /**
     *  map函数，返回底部导航item数组
     */
    const _tabs = () =>
        routes.map((route: any, index: number) => {
            const { options } = descriptors[route.key]; //每个BottomTab.Screen 的可选属性

            const label =
                options.tabBarLabel != undefined
                    ? options.tabBarLabel
                    : options.title != undefined
                        ? options.title
                        : route.name;

            const isFocused = state.index === index; //当前tab是否获得焦点

            const onPress = () => {
                const event = navigation.emit({
                    type: "tabPress",
                    target: route.key
                }); // 发送底部tab被点击的事件通知
                if (!isFocused && !event.defaultPrevented)
                    navigation.navigate(route.name);
            };

            const onLongPress = () => {
                //TODO: 长按事件
            };

            return (
                <R.TouchableOpacity
                    activeOpacity={1.0}
                    key={index}
                    onPress={onPress}
                    style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                    <R.Text style={{
                        color: isFocused ? color.BottomTab_TextKind_textSelected : color.BottomTab_TextKind_text ,
                        fontSize: 17,
                        fontWeight: 'bold'
                    }}>
                        {label}
                    </R.Text>
                </R.TouchableOpacity>
            )
        }
        );

    //启用全屏模式（底部栏漂浮）
    const fullScreen = state.index == -1;

    return (
        <R.View style={fullScreen ? styles.fullscreen_Tab : styles.normal_Tab_Textkind}>
            <R.View style={[
                { backgroundColor: color.alpha0, paddingTop: dimen.BottomTab_paddingTop },
                styles.tabContainer_Textkind]}
            >
                {
                    _tabs()
                }
            </R.View>
        </R.View>
    );
}

const styles = R.StyleSheet.create({
    tabContainer: {
        width: sw,
        flexDirection: 'row',
        height: dimen.BottomTab_tabHeight,
        borderTopColor: color.BottomTab_TopBorder,
        borderTopWidth: dimen.BottomTab_borderTop
    },
    tabContainer_Textkind: {
        width: sw,
        flexDirection: 'row',
        height: dimen.BottomTab_tabHeight,
    },
    fullscreen_Tab: {
        position: 'absolute',
        zIndex: 10,
        bottom: 0,
        paddingBottom: Adp.BottomUnsafeAreaPadding,
        backgroundColor: color.alpha0
    },
    normal_Tab: {
        paddingBottom: Adp.BottomUnsafeAreaPadding,
        backgroundColor: color.BottomTab_color,
        shadowColor: color.TextShadow,
        shadowRadius: 8,
        shadowOpacity:1.0,
        shadowOffset:{width:5,height:5},
        elevation: 14
    },
    normal_Tab_Textkind: {
        paddingBottom: Adp.BottomUnsafeAreaPadding,
        backgroundColor: color.BottomTab_TextKind_bg
    }
})